<template>
  <div class="dashboard-container">
    <el-row :gutter="20" style>
      <el-col :span="24">
        <el-card
          shadow="never"
          style="background: #134e66;color: #fff;padding: 5px 0 0 5px;border-radius: 10px;"
        >
          <el-row :gutter="20" style="margin-bottom: 5px;">
            <el-col :span="19">
              <div style="font-size: 36px;">{{marketName}} - {{date}}经营日报</div>
            </el-col>
            <el-col :span="5">
              <el-date-picker
                v-model="valueDate"
                type="date"
                @change="changeDate"
                placeholder="选择日期"
              ></el-date-picker>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <p style="font-size: 18px; margin-top: 10px;">交易报表</p>
    <el-card
      shadow="never"
      style="margin-bottom: 5px;background: #fff; color: #000;font-size: 12px;border-radius: 10px;"
    >
      <el-row :gutter="20">
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;">
            <div style="padding: 5px 0;">今日交易额（万元）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{(todaySales.Sales/1000000).toFixed(2)}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{(yesterdaySales.Sales/1000000).toFixed(2)}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div
                  style="padding: 4px 0;"
                >{{Math.round((todaySales.Sales-yesterdaySales.Sales)/yesterdaySales.Sales*100)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">今日交易目标完成情况</div>
            <div style="font-size: 38px;padding-top: 5px;">
              <el-progress width="80" type="circle" :stroke-width="3" :percentage="salesRat"></el-progress>
              <!-- <el-progress type="circle" :stroke-width="3" :percentage="salesRat"></el-progress> -->
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">今日交易笔数（万笔）</div>
            <div
              style="padding: 5px 0;font-size: 24px;"
            >{{(todaySales.DocCount / 10000).toFixed(2)}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{(yesterdaySales.DocCount / 10000).toFixed(2)}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div
                  style="padding: 4px 0;"
                >{{Math.round((todaySales.DocCount-yesterdaySales.DocCount)/yesterdaySales.DocCount*100)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">今日交易量（吨）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{(todaySales.Weight/1000000).toFixed(2)}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{(yesterdaySales.Weight/1000000).toFixed(2)}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div
                  style="padding: 4px 0;"
                >{{Math.round((todaySales.Weight-yesterdaySales.Weight)/yesterdaySales.Weight*100)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">今日客单价（元）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{Math.round(todaySales.PCT)}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{Math.round(yesterdaySales.PCT)}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div
                  style="padding: 4px 0;"
                >{{Math.round((todaySales.PCT-yesterdaySales.PCT)/yesterdaySales.PCT*100)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">会员交易额（万元）</div>
            <div style="padding: 5px 0;font-size: 24px;">0</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">0</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">0%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="12">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            交易额趋势
          </p>
          <chart :options="jiaoyiequshioptions" style="height: 325px; margin: -30px 0px -10px 0px;"></chart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            交易量趋势
          </p>
          <chart
            :options="jiaoyiliangqushioptions"
            style="height: 325px; margin: -30px 0px -10px 0px;"
          ></chart>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            品类交易额分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart
                  :options="pinleijiaoyiefenxioptions"
                  style="height: 325px; margin: -30px 0px -10px -30px;"
                ></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <!-- color: ['#3c90f7', '#55bfc0', '#5ebe67', '#f4cd49', '#e05666', '#7c4bd9'], -->
              <ul style="list-style: none;height: 248px;padding: 0px 0 0;">
                <li
                  v-for="item in pinleijiaoyieData.chartArr1"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 7px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            品类交易量分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart
                  :options="pinleijiaoyiliangfenxioptions"
                  style="height: 325px; margin: -30px 0px -10px -30px;"
                ></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <!-- color: ['#3c90f7', '#55bfc0', '#5ebe67', '#f4cd49', '#e05666', '#7c4bd9'], -->
              <ul style="list-style: none;height: 248px;padding: 0px 0 0;">
                <li
                  v-for="item in pinleijiaoyieData.chartArr2"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 7px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            品类客单价分析
          </p>
          <chart
            :options="pinleikeydanjiaoptions"
            style="height: 325px; margin: -30px 0px -10px 0px;"
          ></chart>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="8">
        <el-card shadow="never">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            交易峰值分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart
                  :options="jiaoyifengzhifenxioptions"
                  style="height: 325px; margin: -30px 0px -10px -30px;"
                ></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <!-- color: ['#3c90f7', '#55bfc0', '#5ebe67', '#f4cd49', '#e05666', '#7c4bd9'], -->
              <ul style="list-style: none;height: 248px;padding: 40px 0 0;">
                <li
                  v-for="item in jiaoyifengzhifenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}%</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            单品交易额分析
          </p>
          <chart
            :options="danpinjiaoyieoptions"
            style="height: 325px; margin: -30px 0px -10px 0px;"
          ></chart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            单品交易量分析
          </p>
          <chart
            :options="danpinjiaoyiliangoptions"
            style="height: 325px; margin: -30px 0px -10px 0px;"
          ></chart>
        </el-card>
      </el-col>
    </el-row>

    <p style="font-size: 18px; margin-top: 10px;">客流报表</p>
    <el-card
      shadow="never"
      style="margin-bottom: 5px;background: #fff; color: #000;font-size: 12px;border-radius: 10px;"
    >
      <el-row :gutter="20">
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;">
            <div style="padding: 5px 0;">今日总客流（人）</div>
            <div style="padding: 5px 0;font-size: 24px;">{{todayPeopleNumber.totalFlow.monthCount}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{yestodayPeopleNumber.totalFlow.preMonthCount}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{todayPeopleNumber.totalFlow.amountTrend}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">今日客流目标完成情况</div>
            <div style="font-size: 38px;padding-top: 5px;">
              <el-progress width="80" type="circle" :stroke-width="3" :percentage="peopleRat"></el-progress>
              <!-- <el-progress type="circle" :stroke-width="3" :percentage="peopleRat"></el-progress> -->
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">今日去重客流（人）</div>
            <div
              style="padding: 5px 0;font-size: 24px;"
            >{{todayPeopleNumber.totalRemoveFlow.monthCount}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{yestodayPeopleNumber.totalRemoveFlow.preMonthCount}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{todayPeopleNumber.totalRemoveFlow.amountTrend}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">今日新客客流（人）</div>
            <div
              style="padding: 5px 0;font-size: 24px;"
            >{{todayPeopleNumber.totalNewFlow.monthCount}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{yestodayPeopleNumber.totalNewFlow.preMonthCount}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{todayPeopleNumber.totalNewFlow.amountTrend}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">今日回头客流（人）</div>
            <div
              style="padding: 5px 0;font-size: 24px;"
            >{{todayPeopleNumber.totalIntervalFlow.monthCount}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div
                  style="padding: 4px 0;"
                >{{yestodayPeopleNumber.totalIntervalFlow.preMonthCount}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{todayPeopleNumber.totalIntervalFlow.amountTrend}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">会员客流（人）</div>
            <div style="padding: 5px 0;font-size: 24px;">0</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">0</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">0%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="18">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            客流趋势
          </p>
          <chart :options="keliuqushioptions" style="height: 325px; margin: -30px 0px -30px 0px;"></chart>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            客流漏斗
          </p>
          <chart :options="keliuloudouoptions" style="height: 325px; margin: -30px 0px -30px 0px;"></chart>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="12">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            客群画像
          </p>
          <el-row>
            <el-col :span="18">
              <chart
                :options="kequnhuaxiangoptions"
                style="height: 325px; margin: -30px 0px -10px 0px;"
              ></chart>
            </el-col>
            <el-col :span="6">
              <div style="font-size: 14px;padding-left: 10px;">
                <div style="margin: 45px 0;">
                  <div style="padding-left: 40px;">
                    <img style="width: 50px;" src="../../../assets/ma.jpg" alt />
                  </div>
                  <div>客流总数：{{maleNumber}}人</div>
                  <div>人群占比：{{malePct}}</div>
                </div>
                <div>
                  <div style="padding-left: 40px;">
                    <img style="width: 50px;" src="../../../assets/fa.jpg" alt />
                  </div>
                  <div>客流总数：{{femaleNumber}}人</div>
                  <div>人群占比：{{femalePct}}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            客流峰值分析
          </p>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-row>
                <el-col :span="14">
                  <div style="position: relative">
                    <chart
                      :options="keliufengzhifenxioptions"
                      style="height: 325px; margin: -30px 0px -10px -20px;"
                    ></chart>
                  </div>
                </el-col>
                <el-col :span="10">
                  <ul style="list-style: none;height: 248px;padding: 40px 0 0;">
                    <li
                      v-for="item in keliufengzhifenxiData"
                      :key="item"
                      style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                    >
                      <span
                        :style="{'background-color': item.color}"
                        style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                      ></span>
                      <span
                        style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                      >{{item.key}}</span>
                      <div
                        style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                      >|</div>
                      <span style="position: absolute;">
                        <span style="line-height: 22px;">{{item.value}}</span>
                      </span>
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <chart
                :options="weekkeliufengzhifenxioptions"
                style="height: 325px; margin: -30px 0px -10px 0px;"
              ></chart>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="16">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            回访活跃度分析
          </p>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-row>
                <el-col :span="15">
                  <chart
                    :options="lastTimeOptions"
                    style="height: 325px; margin: -30px 0px -10px -20px;"
                  ></chart>
                </el-col>
                <el-col :span="9">
                  <ul style="list-style: none;height: 248px;padding: 50px 0 0;">
                    <li
                      v-for="item in huifanghuoyuedufenxiData1"
                      :key="item"
                      style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                    >
                      <span
                        :style="{'background-color': item.color}"
                        style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                      ></span>
                      <span
                        style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                      >{{item.key}}</span>
                      <div
                        style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                      >|</div>
                      <span style="position: absolute;">
                        <span style="line-height: 22px;">{{item.value}}</span>
                      </span>
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="15">
                  <chart
                    :options="lastTimeOptions2"
                    style="height: 325px; margin: -30px 0px -10px -20px;"
                  ></chart>
                </el-col>
                <el-col :span="9">
                  <ul style="list-style: none;height: 248px;padding: 0;">
                    <p style="color: rgba(0,0,0,.65);font-size: 14px;margin-left: -15px;">低频回头客</p>
                    <li
                      v-for="item in huifanghuoyuedufenxiData2.chartArr1"
                      :key="item"
                      style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                    >
                      <span
                        :style="{'background-color': item.color}"
                        style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                      ></span>
                      <span
                        style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                      >{{item.key}}</span>
                      <div
                        style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                      >|</div>
                      <span style="position: absolute;">
                        <span style="line-height: 22px;">{{item.value}}</span>
                      </span>
                    </li>
                    <p style="color: rgba(0,0,0,.65);font-size: 14px;margin-left: -15px;">高频回头客</p>
                    <li
                      v-for="item in huifanghuoyuedufenxiData2.chartArr2"
                      :key="item"
                      style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                    >
                      <span
                        :style="{'background-color': item.color}"
                        style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                      ></span>
                      <span
                        style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                      >{{item.key}}</span>
                      <div
                        style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                      >|</div>
                      <span style="position: absolute;">
                        <span style="line-height: 22px;">{{item.value}}</span>
                      </span>
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            入口热力分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart
                  :options="rukourelifenxioptions"
                  style="height: 325px; margin: -30px 0px -10px -20px;"
                ></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;height: 248px;padding: 0;">
                <li
                  v-for="item in rukourelifenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 7px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <p style="font-size: 18px; margin-top: 10px;">检测报表</p>
    <el-card
      shadow="never"
      style="margin-bottom: 5px;background: #fff; color: #000;font-size: 12px;border-radius: 10px;"
    >
      <el-row :gutter="20">
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;">
            <div style="padding: 5px 0;">今日检测批次数</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.batchTotal}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.batchTotalPrevious}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.batchTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">今日检测品种数</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.categoryTotal}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.categoryTotalPrevious}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.categoryTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">今日检测摊位数</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.businessTotal}}</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.businessTotalPrevious}}</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.businessTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-right: 1px solid #999;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">今日检测阳性数</div>
            <div style="padding: 5px 0;font-size: 24px;">{{jiancebaobiao.positiveTotal.toFixed(2)}}%</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.positiveTotalPrevious.toFixed(2)}}%</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.positiveTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;">
            <div style="padding: 5px 0;">今日检测疑似阳性数</div>
            <div
              style="padding: 5px 0;font-size: 24px;"
            >{{jiancebaobiao.positiveSuspectedTotal.toFixed(2)}}%</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div
                  style="padding: 4px 0;"
                >{{jiancebaobiao.positiveSuspectedTotalPrevious.toFixed(2)}}%</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div
                  style="padding: 4px 0;"
                >{{(jiancebaobiao.positiveSuspectedTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center;border-left: 1px solid #999;">
            <div style="padding: 5px 0;">今日检测合格率</div>
            <div
              style="padding: 5px 0;font-size: 24px;"
            >{{jiancebaobiao.qualifiedTotal.toFixed(2)}}%</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="padding: 4px 0;">昨天：</div>
                <div style="padding: 4px 0;">{{jiancebaobiao.qualifiedTotalPrevious.toFixed(2)}}%</div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 4px 0;">环比：</div>
                <div style="padding: 4px 0;">{{(jiancebaobiao.qualifiedTotalRate*100).toFixed(2)}}%</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="18">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            检测趋势
          </p>
          <chart
            :options="jiancequshioptions"
            style="height: 325px; margin: -20px -100px -20px -100px;"
          ></chart>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            检测品类分布
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart
                  :options="jiancepinleifenbuoptions"
                  style="height: 325px; margin:-30px 0px -10px -20px;"
                ></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;height: 248px;padding: 0px 0 0;">
                <li
                  v-for="item in jiancepinleifenbuData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 7px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="5" style="margin-bottom: 0px;">
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            不合格产品分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart
                  :options="buhegechanpinoptions"
                  style="height: 325px; margin: -30px 0px -10px -20px;"
                ></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;height: 248px;padding: 20px 0 0;">
                <li
                  v-for="item in buhegechanpinfenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            不合格摊位分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart
                  :options="buhegetanweioptions"
                  style="height: 325px; margin: -30px 0px -10px -20px;"
                ></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;height: 248px;padding: 20px 0 0;">
                <li
                  v-for="item in buhegetanweifenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" style="margin-bottom: 5px;">
          <p style="margin: 5px 0 0 3px;font-size: 16px;">
            <span style="color: #f65f2f;border: 3px solid #f65f2f; margin-right: 10px;"></span>
            不合格时间分析
          </p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart
                  :options="buhegeshijianoptions"
                  style="height: 325px; margin: -30px 0px -10px -20px;"
                ></chart>
              </div>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;height: 248px;padding: 20px 0 0;">
                <li
                  v-for="item in buhegeshijianfenxiData"
                  :key="item"
                  style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;"
                >
                  <span
                    :style="{'background-color': item.color}"
                    style="border-radius: 8px;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"
                  ></span>
                  <span
                    style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;"
                  >{{item.key}}</span>
                  <div
                    style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;"
                  >|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{item.value}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import Chart from "@/components/Charts";
import {
  saleAmount,
  formatDate,
  formatDate2,
  formatDate5,
  trend
} from "@/utils";
import Cookies from "js-cookie";
import store from "@/store";

export default {
  name: "home",
  components: {
    Chart
  },
  data() {
    return {
      rukourelifenxiData: [], // 入口热力分析
      jiancepinleifenbuData: [], // 检测品类分布
      pinleijiaoyieData: {}, // 品类交易额分析、量分析
      jiaoyifengzhifenxiData: [], // 交易峰值分析
      keliufengzhifenxiData: [], //客流峰值分析
      huifanghuoyuedufenxiData1: [], //回访活跃度分析1
      huifanghuoyuedufenxiData2: [], //回访活跃度分析2
      buhegechanpinfenxiData: [], //不合格产品分析
      buhegetanweifenxiData: [], //不合格摊位分析
      buhegeshijianfenxiData: [], //不合格时间分析

      marketName: "",

      salesRat: 0,
      peopleRat: 0,

      date: "", // 显示在标题上的

      dateValue: formatDate(new Date()), // 选择日期 日
      valueDate: formatDate2(new Date()), // 日期选择器

      sort: 1, // 1: 金额，2：重量

      // 客群画像(人数)
      maleNumber: 0, //	int	男
      malePct: 0, // 男占比
      femaleNumber: 0, //	int	女
      femalePct: 0, // 女占比

      // 交易报表 数据看板
      todaySales: {
        Sales: 0,
        DocCount: 0,
        Weight: 0,
        PCT: 0
      },
      yesterdaySales: {
        Sales: 0,
        DocCount: 0,
        Weight: 0,
        PCT: 0
      },
      // 客流报表 数据看板
      todayPeopleNumber: {
        totalFlow: {
          //	json	今日总客流
          monthCount: 0, //	int	今日数量
          amountTrend: 0 //	string	环比
        },
        totalRemoveFlow: {
          //		json	今日去重客流
          monthCount: 0, //	int	今日数量
          amountTrend: 0 //	string	环比
        },
        totalNewFlow: {
          //		json	今日新客流
          monthCount: 0, //	int	今日数量
          amountTrend: 0 //	string	环比
        },
        totalIntervalFlow: {
          //		json	今日回头客流
          monthCount: 0, //	int	今日数量
          amountTrend: 0 //	string	环比
        }
      },
      yestodayPeopleNumber: {
        totalFlow: {
          //	json	今日总客流
          preMonthCount: 0 //	int	昨天数量
        },
        totalRemoveFlow: {
          //		json	今日去重客流
          preMonthCount: 0 //	int	昨天数量
        },
        totalNewFlow: {
          //		json	今日新客流
          preMonthCount: 0 //	int	昨天数量
        },
        totalIntervalFlow: {
          //		json	今日回头客流
          preMonthCount: 0 //	int	昨天数量
        }
      },
      // 检测报表 数据看板
      jiancebaobiao: {
        batchTotal: 0, //	int	今日检测批次
        batchTotalPrevious: 0, //	int	上个周检测批次
        batchTotalRate: 0, //	int	检测批次环比	未乘以100
        categoryTotal: 0, //	int	今日品类数
        categoryTotalPrevious: 0, //	int	上个周品类数
        categoryTotalRate: 0, //	int	品类环比	未乘以100
        businessTotal: 0, //	int	今日摊位数
        businessTotalPrevious: 0, //	int	上个周摊位数
        businessTotalRate: 0, //	int	摊位环比	未乘以100
        qualifiedTotal: 0, //	int	今日合格率	未乘以100
        qualifiedTotalPrevious: 0, //	int	上个周的合格率	未乘以100
        qualifiedTotalRate: 0, //	int	环比合格率	未乘以100
        positiveTotal: 0, //	int	阳性数
        positiveTotalPrevious: 0, //	int	上个月阳性数
        positiveTotalRate: 0, //	float	阳性数环比	未乘以100
        positiveSuspectedTotal: 0, //	int	疑似阳性
        positiveSuspectedTotalPrevious: 0, //	int	上个月疑似阳性
        positiveSuspectedTotalRate: 0 //	float	疑似阳性环比	未乘以100
      }
    };
  },
  watch: {
    "$store.state.app.marketId"(val, oldVal) {
      if (val != oldVal && oldVal != 0) {
        // 切换市场时 更新 周报 title
        const marketData = JSON.parse(Cookies.get("MarketData"));
        let obj = {};
        obj = marketData.find(item => {
          // 这里的 marketData 就是上面的数据源
          return item.id === val; //筛选出匹配数据
        });
        this.marketName = obj.name;
        this.fetchData();
      }
    }
  },
  computed: {
    // ...mapGetters(['name']),
    ...mapState("home", ["SALES_RAT", "PEOPLE_RAT"]),
    // 交易额趋势
    ...mapState("businessReport", [
      "jiaoyiequshioptions",
      "jiaoyiliangqushioptions",
      "pinleijiaoyiefenxioptions",
      "pinleijiaoyiliangfenxioptions",
      "pinleikeydanjiaoptions",
      "jiaoyifengzhifenxioptions",
      "danpinjiaoyieoptions",
      "danpinjiaoyiliangoptions",
      "keliuqushioptions",
      "kequnhuaxiangoptions",
      "rukourelifenxioptions",
      "jiancepinleifenbuoptions",
      "buhegechanpinoptions",
      "buhegetanweioptions",
      "buhegeshijianoptions",
      "jiancequshioptions",
      "keliuloudouoptions",
      "keliufengzhifenxioptions",
      "weekkeliufengzhifenxioptions",
      "lastTimeOptions",
      "lastTimeOptions2"
    ]),
    ...mapState("peopleNumber", [
      "inRecentMonthOptions",
      "optionsFrequencyDistributions"
    ])
  },
  mounted() {
    const marketData = JSON.parse(Cookies.get("MarketData"));
    let obj = {};
    obj = marketData.find(item => {
      // 这里的 marketData 就是上面的数据源
      return item.id === this.$store.state.app.marketId; //筛选出匹配数据
    });
    this.marketName = obj.name;
    // const marketData = JSON.parse(Cookies.get('MarketData'))
    // this.marketName = marketData[0].name
    this.fetchData();
  },
  methods: {
    // 获取指定日期的前一天
    getNextDate(date, day) {
      let dd = new Date(date);
      dd.setDate(dd.getDate() + day);
      let y = dd.getFullYear();
      let m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
      let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
      return y + "-" + m + "-" + d;
    },
    fetchData() {
      this.salesRat = this.SALES_RAT;
      this.peopleRat = this.PEOPLE_RAT;

      const marketId = store.state.app.marketId;
      // this.marketName = store.state.app.marketName

      this.date = formatDate5(new Date())[0];

      // 获取今年 年 月 日
      const myDate = new Date();
      const year = myDate.getFullYear();
      const month = myDate.getMonth() + 1;
      const day = myDate.getDate();

      // 获取 昨日
      const yesterdayYear = parseInt(
        this.getNextDate(formatDate2(new Date()), -1).slice(0, 4)
      );
      const yesterdayMonth = parseInt(
        this.getNextDate(formatDate2(new Date()), -1).slice(5, 7)
      );
      const yesterdayDay = parseInt(
        this.getNextDate(formatDate2(new Date()), -1).slice(8, 10)
      );

      const today = new Date();
      const startDate = formatDate(
        new Date(today.getFullYear(), today.getMonth(), 1, 0, 0, 0)
      );
      const endDate = formatDate(
        new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59)
      );

      // 交易报表 数据看板 sort 1 月 2 日 3 周 4 季度 5年
      this.fetchjiaoyibaobiao(
        year,
        month,
        day,
        "",
        "",
        yesterdayYear,
        yesterdayMonth,
        yesterdayDay,
        "",
        "",
        marketId,
        2
      );
      // 交易额/量趋势
      this.getjiaoyiequshi(year, month, day, "", "", marketId, 2);
      // 品类交易额/量/客单价
      this.getpinleijiaoyie(year, month, day, "", "", marketId, 2);
      // 交易峰值分析
      this.getjiaoyifengzhi(year, month, day, "", "", marketId, 2);
      // 单品交易额/量分析
      this.getdanpinjiaoyie(year, month, day, "", "", marketId, 2);

      const dateDay = formatDate2(new Date());
      const date = formatDate2(new Date());
      // 客流报表 数据看板
      this.getkeliubaobiao(
        year,
        month,
        yesterdayYear,
        yesterdayMonth,
        dateDay,
        "day"
      );

      // 客流趋势
      this.getkeliuqushi(date, "day");

      // 客流漏斗(周度)
      this.getkeliuloudou(year, month, dateDay, "day");

      // 客群画像(图)
      this.getkequnhuaxiang(year, month, dateDay, "day");

      // 客群画像(人数)
      this.getkequnhuaxiangsex(startDate, endDate, date, "day");

      // 客流峰值分析(饼图)
      this.getkeliufengzhi(date, "day");

      // 客流峰值分析(柱状图)
      this.getweekkeliufengzhi(date, "day");

      // 回访活跃度分析(饼图1)
      this.getFrequentActivities(this.dateValue, date, "day");

      // 回访活跃度分析(饼图2)
      this.getFrequentActivities2(this.dateValue, date, "day");

      // 入口热力分析
      this.getrukourelifenxi(startDate, endDate, date, "day");

      // 检测报表 数据看板
      this.getjiancebaobiao(date, "day");

      // 检测趋势
      this.getjiancequshi(date, "day");

      // 检测品类分布
      this.getjiancepinleifenbu(date, "day");

      // 不合格产品
      this.getbuhegechanpin(date, "day");

      // 不合格摊位
      this.getbuhegetanwei(date, "day");

      // 不合格时间
      this.getbuhegeshijian(date, "day");
    },

    // 交易报表 数据看板
    fetchjiaoyibaobiao(
      year,
      month,
      day,
      week,
      quarter,
      yesterdayYear,
      yesterdayMonth,
      yesterdayDay,
      yesterdayWeek,
      yesterdayQuarter,
      marketId,
      sort
    ) {
      this.$store
        .dispatch("businessReport/fetchjiaoyibaobiao", {
          year,
          month,
          day,
          week,
          quarter,
          yesterdayYear,
          yesterdayMonth,
          yesterdayDay,
          yesterdayWeek,
          yesterdayQuarter,
          marketId,
          sort
        })
        .then(data => {
          this.todaySales = data[0];
          this.yesterdaySales = data[1];
        });
    },

    // 交易额/量趋势
    getjiaoyiequshi(year, month, day, week, quarter, id, sort) {
      this.$store.dispatch("businessReport/fetchjiaoyiequshi", {
        year,
        month,
        day,
        week,
        quarter,
        id,
        sort
      });
    },

    // 品类交易额/量/客单价
    getpinleijiaoyie(year, month, day, week, quarter, id, sort) {
      this.$store
        .dispatch("businessReport/fetchpinleijiaoyie", {
          year,
          month,
          day,
          week,
          quarter,
          id,
          sort
        })
        .then(data => {
          this.pinleijiaoyieData = data;
        });
    },

    // 交易峰值分析
    getjiaoyifengzhi(year, month, day, week, quarter, id, sort) {
      this.$store
        .dispatch("businessReport/fetchjiaoyifengzhi", {
          year,
          month,
          day,
          week,
          quarter,
          id,
          sort
        })
        .then(data => {
          this.jiaoyifengzhifenxiData = data;
        });
    },

    // 单品交易额/量分析
    getdanpinjiaoyie(year, month, day, week, quarter, id, sort, flag) {
      this.$store.dispatch("businessReport/fetchdanpinjiaoyie", {
        year,
        month,
        day,
        week,
        quarter,
        id,
        sort,
        flag
      });
    },

    // 客流报表
    getkeliubaobiao(year, month, yesterdayYear, yesterdayMonth, date, type) {
      this.$store
        .dispatch("businessReport/fetchkeliubaobiao", {
          year,
          month,
          yesterdayYear,
          yesterdayMonth,
          date,
          type
        })
        .then(data => {
          this.todayPeopleNumber.totalFlow = data[0].totalFlow;
          this.todayPeopleNumber.totalRemoveFlow = data[0].totalRemoveFlow;
          this.todayPeopleNumber.totalNewFlow = data[0].totalNewFlow;
          this.todayPeopleNumber.totalIntervalFlow = data[0].totalIntervalFlow;
          this.yestodayPeopleNumber.totalFlow = data[1].totalFlow;
          this.yestodayPeopleNumber.totalRemoveFlow = data[1].totalRemoveFlow;
          this.yestodayPeopleNumber.totalNewFlow = data[1].totalNewFlow;
          this.yestodayPeopleNumber.totalIntervalFlow =
            data[1].totalIntervalFlow;
        });
    },

    // 客流趋势
    getkeliuqushi(date, type) {
      this.$store.dispatch("businessReport/fetchkeliuqushi", { date, type });
    },

    // 客流漏斗(周度)
    getkeliuloudou(year, month, date, type) {
      this.$store.dispatch("businessReport/fetchkeliuloudou", {
        year,
        month,
        date,
        type
      });
    },

    // 客群画像(图)
    getkequnhuaxiang(year, month, date, type) {
      this.$store.dispatch("businessReport/fetchkequnhuaxiang", {
        year,
        month,
        date,
        type
      });
    },

    // 客群画像(人数)
    getkequnhuaxiangsex(startDate, endDate, date, type) {
      this.$store
        .dispatch("businessReport/fetchkequnhuaxiangsex", {
          startDate,
          endDate,
          date,
          type
        })
        .then(data => {
          this.maleNumber = data.maleNumber; //	int	男
          this.femaleNumber = data.femaleNumber; //	int	女
          this.malePct =
            ((data.maleNumber / data.totalNumber) * 100).toFixed() + "%"; // 男占比
          this.femalePct =
            ((data.femaleNumber / data.totalNumber) * 100).toFixed() + "%"; // 女占比
        });
    },

    // 客流峰值分析(饼图)
    getkeliufengzhi(date, type) {
      this.$store
        .dispatch("businessReport/fetchkeliufengzhi", { date, type })
        .then(data => {
          this.keliufengzhifenxiData = data;
        });
    },

    // 客流峰值分析(柱状图)
    getweekkeliufengzhi(date, type) {
      this.$store.dispatch("businessReport/fetchweekkeliufengzhi", {
        date,
        type
      });
    },

    // 回访活跃度分析(饼图1)
    getFrequentActivities(targetDate, date, type) {
      this.$store
        .dispatch("businessReport/fetchFrequentActivities", {
          targetDate,
          date,
          type
        })
        .then(data => {
          this.huifanghuoyuedufenxiData1 = data;
        })
        .catch(err => {});
    },

    // 回访活跃度分析(饼图2)
    getFrequentActivities2(targetDate, date, type) {
      this.$store
        .dispatch("businessReport/fetchFrequentActivities2", {
          targetDate,
          date,
          type
        })
        .then(data => {
          this.huifanghuoyuedufenxiData2 = data;
        })
        .catch(err => {});
    },

    // 入口热力分析
    getrukourelifenxi(startDate, endDate, date, type) {
      this.$store
        .dispatch("businessReport/fetchrukourelifenxi", {
          startDate,
          endDate,
          date,
          type
        })
        .then(data => {
          this.rukourelifenxiData = data;
        });
    },

    // 检测报表 数据看板
    getjiancebaobiao(date, type) {
      this.$store
        .dispatch("businessReport/fetchjiancebaobiao", { date, type })
        .then(data => {
          this.jiancebaobiao = data;
        });
    },

    // 检测趋势
    getjiancequshi(date, type) {
      this.$store.dispatch("businessReport/fetchjiancequshi", { date, type });
    },

    // 检测品类分布
    getjiancepinleifenbu(date, type) {
      this.$store
        .dispatch("businessReport/fetchjiancepinleifenbu", { date, type })
        .then(data => {
          this.jiancepinleifenbuData = data;
        });
    },
    // 不合格产品
    getbuhegechanpin(date, type) {
      this.$store
        .dispatch("businessReport/fetchbuhegechanpin", { date, type })
        .then(data => {
          this.buhegechanpinfenxiData = data;
        });
    },

    // 不合格摊位
    getbuhegetanwei(date, type) {
      this.$store
        .dispatch("businessReport/fetchbuhegetanwei", { date, type })
        .then(data => {
          this.buhegetanweifenxiData = data;
        });
    },

    // 不合格时间
    getbuhegeshijian(date, type) {
      this.$store
        .dispatch("businessReport/fetchbuhegeshijian", { date, type })
        .then(data => {
          this.buhegeshijianfenxiData = data;
        });
    },

    getPreMonth(date) {
      // 获取当前选中月份的上个月
      let arr = date.split("-");
      let year = arr[0]; //获取当前日期的年份
      let month = arr[1]; //获取当前日期的月份
      let day = arr[2]; //获取当前日期的日
      let days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      let year2 = year;
      let month2 = parseInt(month) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
      let day2 = day;
      let days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = "0" + month2;
      }
      let t2 = year2 + "-" + month2 + "-" + day2;
      let t1 = year2 + "-" + month2;
      return [t1, t2];
    },
    // 改变日期
    changeDate(changedate) {
      // this.valueDate = formatDate2(changedate).slice(0,7) // 2020-05
      // console.log(this.valueDate)
      // console.log(this.getPreMonth(formatDate2(changedate).slice(0,7))[0]) // 2020-04

      this.date = formatDate5(changedate)[1];
      const marketId = store.state.app.marketId;
      const year = parseInt(formatDate2(changedate).slice(0, 4));
      const month = parseInt(formatDate2(changedate).slice(5, 7));
      const day = parseInt(formatDate2(changedate).slice(8, 10));

      const yesterdayYear = parseInt(
        this.getNextDate(formatDate2(changedate), -1).slice(0, 4)
      );
      const yesterdayMonth = parseInt(
        this.getNextDate(formatDate2(changedate), -1).slice(5, 7)
      );
      const yesterdayDay = parseInt(
        this.getNextDate(formatDate2(changedate), -1).slice(8, 10)
      );

      const startDate = formatDate(
        new Date(changedate.getFullYear(), changedate.getMonth(), 1, 0, 0, 0)
      );
      const endDate = formatDate(
        new Date(
          changedate.getFullYear(),
          changedate.getMonth() + 1,
          0,
          23,
          59,
          59
        )
      );

      // 交易报表 数据看板 sort 1 月 2 日 3 周 4 季度 5年
      this.fetchjiaoyibaobiao(
        year,
        month,
        day,
        "",
        "",
        yesterdayYear,
        yesterdayMonth,
        yesterdayDay,
        "",
        "",
        marketId,
        2
      );
      // 交易额/量趋势
      this.getjiaoyiequshi(year, month, day, "", "", marketId, 2);
      // 品类交易额/量/客单价
      this.getpinleijiaoyie(year, month, day, "", "", marketId, 2);
      // 交易峰值分析
      this.getjiaoyifengzhi(year, month, day, "", "", marketId, 2);
      // 单品交易额/量分析
      this.getdanpinjiaoyie(year, month, day, "", "", marketId, 2);

      const dateDay = formatDate2(changedate);
      const date = formatDate2(changedate);
      // 客流报表 数据看板
      this.getkeliubaobiao(
        year,
        month,
        yesterdayYear,
        yesterdayMonth,
        dateDay,
        "day"
      );

      // 客流趋势
      this.getkeliuqushi(date, "day");

      // 客流漏斗(周度)
      this.getkeliuloudou(year, month, dateDay, "day");

      // 客群画像(图)
      this.getkequnhuaxiang(year, month, dateDay, "day");

      // 客群画像(人数)
      this.getkequnhuaxiangsex(startDate, endDate, date, "day");

      // 客流峰值分析(饼图)
      this.getkeliufengzhi(date, "day");

      // 客流峰值分析(柱状图)
      this.getweekkeliufengzhi(date, "day");

      // 回访活跃度分析(饼图1)
      this.getFrequentActivities(this.dateValue, date, "day");

      // 回访活跃度分析(饼图2)
      this.getFrequentActivities2(this.dateValue, date, "day");

      // 入口热力分析
      this.getrukourelifenxi(startDate, endDate, date, "day");

      // 检测报表 数据看板
      this.getjiancebaobiao(date, "day");

      // 检测趋势
      this.getjiancequshi(date, "day");

      // 检测品类分布
      this.getjiancepinleifenbu(date, "day");

      // 不合格产品
      this.getbuhegechanpin(date, "day");

      // 不合格摊位
      this.getbuhegetanwei(date, "day");

      // 不合格时间
      this.getbuhegeshijian(date, "day");
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

